<template>
    <div>
        <baidu-map class="map"
                   :zoom="15"
                   :scroll-wheel-zoom="true">
            <bm-polyline :path="_path"
                         stroke-color="blue"
                         :stroke-opacity="0.3"
                         :stroke-weight="5"
                         :editing="false"></bm-polyline>
            <bml-lushu @stop="reset"
                       :path="_path"
                       :icon="icon"
                       :autoView="true"
                       :rotation="false"
                       :speed="2000"
                       :play="play">
            </bml-lushu>
        </baidu-map>
    </div>
</template>

<script>
import { BmlLushu } from '@/components/vue-baidu-map';
import _ from 'lodash';

export default {
    components: {
        BmlLushu,
    },
    props: ['path'],
    data() {
        return {
            play: true,
            icon: {
                url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
                size: { width: 52, height: 26 },
                opts: { anchor: { width: 27, height: 13 } }
            }
        }
    },
    computed: {
        _path() {
            return this.path?.map(val => {
                const ponit = this.txMapToBdMap(val.lng, val.lat)
                //  { "lng": 117.805393, "lat": 39.14751, "of": "inner" }
                // { "lng": 116.403944, "lat": 39.914024, "of": "inner" },
                return {
                    lng: _.floor(ponit.lng, 6),
                    lat: _.floor(ponit.lat, 6),
                    of: "inner",
                }
            }) ?? []
        },
    },
    destroyed() {
        this.$destroy()
    },
    methods: {
        reset() {
            this.play = false
        },
        txMapToBdMap(lng, lat) {
            let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
            let x = _.toNumber(lng);
            let y = _.toNumber(lat);
            let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
            let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
            let lngs = z * Math.cos(theta) + 0.0065;
            let lats = z * Math.sin(theta) + 0.006;

            return {
                lng: lngs,
                lat: lats,
            };
        },
    }
}
</script>
<style scoped>
.map {
    width: 100%;
    height: 700px;
}
</style>
